<template>
	<up-dropdown-item :title="title">
		<view class="dropdown-content content-bd-top">
			<view class="pt-32 pb-14 plr-24">
				<view class="quick-date">
					<view
						v-for="(item, index) in quickDates"
						:key="index"
						:class="['quick-date-item', { selected: selectItemId == item.id }]"
						@click="selectQuickItem(item.id)"
					>
						{{ item.name }}
					</view>
				</view>
				<view class="date-range">
					<view
						:class="['date-range-item', { selected: selectDateType == 'start' }]"
						@click="selectDate('start')"
					>
						{{ startDate || "起始日期" }}
					</view>
					<text class="mlr-18 c-grey-86">至</text>
					<view
						:class="['date-range-item', { selected: selectDateType == 'end' }]"
						@click="selectDate('end')"
					>
						{{ endDate || "终止日期" }}
					</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="p-24 flex">
				<zjy-button pd="60" type="line" @click="reset">重置</zjy-button>
				<view class="ml-18 flex-1">
					<zjy-button @click="submit">确认筛选</zjy-button>
				</view>
			</view>
		</view>
	</up-dropdown-item>
</template>
<script setup lang="ts">
import dayjs from "dayjs"
import { QuickDates } from "../constant"
defineProps({
	modelValue: String,
	title: String,
})
const emit = defineEmits(["update:modelValue", "updateValue", "selectDate", "close"])
const quickDates = ref(QuickDates)
const selectItemId = ref("")
const startDate = ref("")
const endDate = ref("")
const selectDateType = ref("")
const selectQuickItem = (id: string) => {
	if (selectItemId.value == id) {
		selectItemId.value = ""
	} else {
		selectItemId.value = id
	}
	resetRangeDate()
	updateValue()
}
const selectDate = (type: "start" | "end") => {
	selectDateType.value = type
	selectItemId.value = ""
	emit("selectDate", type == "start" ? startDate.value : endDate.value)
}
const resetRangeDate = () => {
	selectDateType.value = ""
	startDate.value = ""
	endDate.value = ""
}
const submit = () => {
	emit("close")
}
const reset = () => {
	selectItemId.value = QuickDates[0].id
	resetRangeDate()
	updateValue()
	submit()
}
const updateValue = () => {
	let dateRanges: string[] = []
	if (startDate.value && endDate.value && !dayjs(endDate.value).isBefore(dayjs(startDate.value))) {
		dateRanges = [startDate.value, endDate.value]
	} else if (selectItemId.value) {
		dateRanges = QuickDates.find((item) => item.id == selectItemId.value)?.value.split("|") || []
	}
	emit("update:modelValue", selectItemId.value)
	emit("updateValue", dateRanges)
}
onMounted(() => {
	uni.$on("setFilterDate", (date: string) => {
		if (selectDateType.value == "start") {
			startDate.value = date
		} else {
			endDate.value = date
		}
		updateValue()
	})
})
onUnmounted(() => {
	uni.$off("setFilterDate")
})
</script>
<style lang="scss" scoped>
.quick-date {
	display: flex;
	.quick-date-item {
		flex: 1;
		padding: 18rpx;
		line-height: 36rpx;
		text-align: center;
		background: rgba(241, 242, 245, 0.7);
		border-radius: 16rpx;
		& + .quick-date-item {
			margin-left: 20rpx;
		}
	}
}
.date-range {
	display: flex;
	align-items: center;
	margin-top: 24rpx;
	.date-range-item {
		flex: 1;
		padding: 18rpx;
		line-height: 36rpx;
		text-align: center;
		background: rgba(241, 242, 245, 0.7);
		border-radius: 16rpx;
	}
}
.selected {
	background: rgba(254, 224, 56, 0.2) !important;
	position: relative;
	&::after {
		position: absolute;
		content: "";
		right: 0;
		bottom: 0;
		width: 28rpx;
		height: 22rpx;
		background: url(#{$imgBaseUrl}filter-icon.png);
		background-position: center center;
		background-size: cover;
	}
}
</style>
